<!--
 * @Description: 服务产品页面
 * @Author: Ronda
 * @Date: 2021-08-10 13:23:06
 * @LastEditors: ZhangYR
 * @LastEditTime: 2022-05-15 11:34:30
-->
<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar
      title="服务产品"
      left-text="返回"
      @click-left="$router.back()"
/>

<!-- 产品展示 -->
<van-row>
  <!-- 商品分类左边导航 -->
  <van-col span="7">
    <!-- {{productcategortData}} -->
    <van-sidebar class="van-left" v-model="activeKey" @change="onChange">
    <van-sidebar-item 
      v-for="item in productcategortData"
      :key="item.id" 
      :title="item.name" />
  </van-sidebar>
</van-col>


<!-- 右边产品栏-->
  <van-col span="17">
    <!-- {{productData}} -->
    <van-card v-for="item in productBycategoryData"
    :key="item.id"
    :price="item.price"
    :desc="item.description"
    :title="item.name"
    :thumb="item.photo"
>
  <template #footer>
    <!-- 步进器 -->
    <van-stepper v-model="item.num" theme="round" min="0" 
    default-value = "0"  @change="stepperchange"
     button-size="22" disable-input />
  </template>
</van-card>
  </van-col>
</van-row>
    
    <!-- 购物车 -->
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
   <van-submit-bar :price="pricetotal * 100"  button-text="提交订单" button-color="rgb(132, 48, 255)"
   @submit="$router.push('orderConfirm')">
  <!-- <van-checkbox v-model="checked">全选</van-checkbox>  -->
</van-submit-bar>
  </div>
</template>

<script>
import {pageQueryProductCategory, pageQueryProduct} from "@/api/index.js"
export default {
  data() {
    return {
      activeKey: 0,
      // 步进器数值
       value: 0,
      // 商品分类数据
      productcategortData: [],
      // 商品数据
      productData: [],
      // 分出类的产品数据
      productBycategoryData: [],
      // 添加商品的总价
      pricetotal: [],
    };
  },
  computed: {},
  methods: {
    // 切换切换导航项时触发
    onChange(index) {
      // console.log(index)
      this.productBycategoryData = this.productData.filter((item) =>{
        return item.category.id ==
        this.productcategortData[index].id;
      })
    },
    
    // 步进器触发发生变化，总价改变，计算商品总价
    stepperchange(index , details){
      let temp = this.productData.filter((item) =>{
        return item.num > 0;
      })
      // console.log(temp);
      let total = 0;
      temp.forEach((item)=>{
        total += item.price * item.num;
        // console.log(total);
      })
      this.pricetotal = total;
    },
    
    // 获取产品分类的数据
    async loadproductcategory(){
      let res = await pageQueryProductCategory({page: 1,pageSize: 100});
      this.productcategortData = res.data.data.list;


      // console.log(this.$route.query.id);
      // 获取上一个页面带过来的参数做对比
      this.productcategortData.forEach((item , index) =>{
        if (item.id == this.$route.query.id) {
          this.activeKey= index;
        }
      })
    },
    // 获取商品的数据
    async loadproduct(){
      let res = await pageQueryProduct({page:1, pageSize:100});
      this.productData = res.data.data.list;
       // 过滤当前选中分类下的商品
        this.productBycategoryData = this.productData.filter((item) =>{
         return item.category.id == this.$route.query.id;
       });
    }
  },
  created() {
    this.loadproductcategory()
    this.loadproduct()
  },
  mounted() {}
};
</script>
<style scoped>
.van-left{
  width: 100%;
  text-align:center;
}
.van-submit-bar {
  bottom: 50px;
}
</style>